<template>
  <div id="print">
    <!-- <a-space class="logos" style="float: left;">
      <img src="../assets/logo.png">
      <img src="../assets/hi.png">
      <div>期待大家的参与😁</div>
    </a-space> -->
    <a-row type="flex" class="menus">
      <a-button-group>
        <a-button v-for="print in demoList" :type="print.name === curDemo ? 'primary' : 'info'"
                  @click="curDemo = print.name" :key="print.name">
          {{ print.title }}
        </a-button>
      </a-button-group>
    </a-row>
    <!-- 动态渲染组件，懒得去弄路由了 -->
    <!-- key一定要有，并且保证每次进入都调用init，因为有bug且这个bug是插件的问题,具体bug为第三次进入某个页面去拽动组件会报错 -->
     <!-- 把每个界面传过来的界面跟数据传给子组件 -->
    <keep-alive :include='keepInclude' :max="10">
      <component :is="curDemo" :provider="providerData" :printData="printDataProp" :key="curDemoKey"/>
    </keep-alive>
  </div>
</template>

<script>

import printDesign from '@/print/design/index.vue'
import printCustom from '@/print/custom/index.vue'
import printTasks from '@/print/tasks/index.vue'

export default {
  name: 'Print',
  components: {printDesign, printCustom, printTasks},
  props: ['provider','printData'],
  data() {
    return {
      providerData : this.provider,
      printDataProp : this.printData,
      curDemo: 'printDesign',
      keepInclude: 'printDesign,printCustom,printTasks',
      demoList: [
        {name: 'printDesign', title: '默认拖拽设计'},
        {name: 'printCustom', title: '自定义设计'},
        {name: 'printTasks', title: '队列/批量打印'}
      ],
      // 每次增加此数来创建新的key
      reloadCounter: 0
    }
  },
  mounted() {
    console.log("这是父组件传的：",this.provider);
    console.log("这是父组件传的：",this.printData);
  },
  computed: {
    curDemoKey() {
      return `${this.curDemo}-${this.reloadCounter}`;
    }
  },
  watch: {
    curDemo() {
      // 每次进入某页面用于创建新的key
      this.reloadCounter++;
    }
  }
}
</script>

<style lang="less">
.logos {
  padding: 6px 24px;
  display: flex;
  justify-content: center;
  align-self: center;

  img {
    height: 40px;
    width: 40px;
  }
}

.menus {
  padding: 10px 24px;
}

// hiprint 拖拽图片
.hiprint-printElement-image-content {
  img {
    content: url("~@/assets/logo.png");
  }
}
</style>
